<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>学位申请预览</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../../layuiadmin/style/admin.css" media="all">
    <style>
        .text-align-left {
            text-align: left;
            width: 100%;
        }

        /* 宫格 */
        .site-doc-icon {
            margin-bottom: 50px;
            font-size: 0;
        }

        .site-doc-icon li {
            display: inline-block;
            vertical-align: middle;
            width: 200px;
            height: 180px;
            line-height: 90px;
            padding: 20px 0;
            margin-right: -1px;
            margin-bottom: -1px;
            border: 1px solid #e2e2e2;
            font-size: 14px;
            text-align: center;
            color: #666;
            transition: all .3s;
            -webkit-transition: all .3s;
        }

        .site-doc-icon li .layui-icon {
            display: inline-block;
            font-size: 36px;
        }

        .no-padding {
            padding: 0px;
        }
        .layui-form-label{
            width: 110px;
        }
    </style>
</head>
<body>
<!--<div class="layui-fluid layui-card">-->
<div class="layui-card">
    <div class="layui-row layui-col-space15">
        <div class="layui-form-item layui-layout-admin">
            <div class="layui-input-block">
                <div class="layui-header" style="left: 0;text-align: center;">
                    <div class="layui-card">
                        <div class="layui-card-body section">
                            <button class="layui-btn" data-type="c_1">学位基本信息</button>
                            <button class="layui-btn" data-type="c_2">阶段性成果</button>
                            <button class="layui-btn" data-type="c_3">学习成绩</button>
                            <button class="layui-btn" data-type="c_4">获奖情况</button>
                            <button class="layui-btn" data-type="c_5">论文开题</button>
                            <button class="layui-btn" data-type="c_6">中期考核</button>
                            <button class="layui-btn" data-type="c_7">毕业论文</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-col-md12">
            <div class="layui-collapse">
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title"  id="c_1">学位基本信息</h2>
                    <div class="layui-colla-content layui-card layui-show">
                        <div class="layui-row layui-col-space10">
                            <div class="layui-col-md12">
                                <div class="layui-col-md10">
                                    <form class="layui-form" action="" lay-filter="component-form-group">
                                        <div class="layui-form-item">
                                            <div class="layui-inline">
                                                <label class="layui-form-label">姓名</label>
                                                <div class="layui-input-inline">
                                                    <label class="layui-form-label text-align-left">测试</label>
                                                </div>
                                            </div>
                                            <div class="layui-inline">
                                                <label class="layui-form-label">性别</label>
                                                <div class="layui-input-inline">
                                                    <label class="layui-form-label text-align-left">男</label>
                                                </div>
                                            </div>
                                            <div class="layui-inline">
                                                <label class="layui-form-label">民族</label>
                                                <div class="layui-input-inline">
                                                    <label class="layui-form-label text-align-left">汉</label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-form-item">
                                            <div class="layui-inline">
                                                <label class="layui-form-label">国家或地区</label>
                                                <div class="layui-input-inline">
                                                    <label class="layui-form-label text-align-left">中国</label>
                                                </div>
                                            </div>
                                            <div class="layui-inline">
                                                <label class="layui-form-label">籍贯</label>
                                                <div class="layui-input-inline">
                                                    <label class="layui-form-label text-align-left">湖南长沙</label>
                                                </div>
                                            </div>
                                            <div class="layui-inline">
                                                <label class="layui-form-label">政治面貌</label>
                                                <div class="layui-input-inline">
                                                    <label class="layui-form-label text-align-left">党员</label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-form-item">
                                            <div class="layui-inline">
                                                <label class="layui-form-label">出生日期</label>
                                                <div class="layui-input-inline">
                                                    <label class="layui-form-label text-align-left">1988-01-01</label>
                                                </div>
                                            </div>
                                            <div class="layui-inline">
                                                <label class="layui-form-label"
                                                       style="width: 160px;">入学前（前置）最高学历</label>
                                                <div class="layui-input-inline">
                                                    <label class="layui-form-label text-align-left">本科</label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-form-item">
                                            <label class="layui-form-label ">身份证号码</label>
                                            <div class="layui-input-block  ">
                                                <label class="layui-form-label text-align-left">431026198801015566</label>
                                            </div>
                                        </div>
                                        <!--<blockquote class="layui-elem-quote layui-quote-nm">-->
                                        <!---->
                                        <!--</blockquote>-->
                                    </form>
                                </div>
                                <div class="layui-col-md2">
                                    <ul class="site-doc-icon">
                                        <li>
                                            <i class="layui-icon"></i>
                                            <div class="name">学位照片</div>
                                            <div class="code">&nbsp;</div>
                                            <div class="fontclass">&nbsp;</div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="layui-col-md12">
                                <fieldset class="layui-elem-field">
                                    <legend>学科信息</legend>
                                    <div class="layui-field-box">
                                        计算机学科即计算机科学与技术，是研究计算机的设计与制造和利用计算机进行信息获取、表示、存储、处理、控制等的理论、原则、方法和技术的学科。方法论是对计算机领域认识和实践过程中的一般方法及其性质特点、内在联系和变化规律进行系统研究的理论总结。
                                    </div>
                                </fieldset>
                                <fieldset class="layui-elem-field">
                                    <legend>学业信息</legend>
                                    <div class="layui-field-box">
                                        计算机学科即计算机科学与技术，是研究计算机的设计与制造和利用计算机进行信息获取、表示、存储、处理、控制等的理论、原则、方法和技术的学科。方法论是对计算机领域认识和实践过程中的一般方法及其性质特点、内在联系和变化规律进行系统研究的理论总结。
                                    </div>
                                </fieldset>
                                <fieldset class="layui-elem-field">
                                    <legend>入学学历信息</legend>
                                    <div class="layui-field-box">
                                        计算机学科即计算机科学与技术，是研究计算机的设计与制造和利用计算机进行信息获取、表示、存储、处理、控制等的理论、原则、方法和技术的学科。方法论是对计算机领域认识和实践过程中的一般方法及其性质特点、内在联系和变化规律进行系统研究的理论总结。
                                    </div>
                                </fieldset>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

            <div class="layui-collapse ">
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title" id="c_2">阶段性成果</h2>
                    <div class="layui-colla-content layui-card layui-show no-padding">
                        <div class="layui-col-md12">
                            <table class="layui-hide" id="table_stage_result" ></table>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-collapse"  >
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title" id="c_3">学习成绩</h2>
                    <div class="layui-colla-content layui-card layui-show no-padding">
                        <blockquote class="layui-elem-quote layui-quote-nm">
                            已选课程数为  2 门， 已通过课程数为  2 门， 共获得学分数为 8 学分
                        </blockquote>
                        <div class="layui-col-md12">
                            <table class="layui-hide" id="table_score" ></table>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-collapse" >
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title"  id="c_4">获奖情况</h2>
                    <div class="layui-colla-content layui-card layui-show no-padding">
                        <div class="layui-col-md12">
                            <table class="layui-hide" id="table_award" ></table>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-collapse" >
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title"  id="c_5">论文开题</h2>
                    <div class="layui-colla-content layui-card layui-show no-padding">
                        <div class="layui-col-md12">
                            <form class="layui-form" action="" lay-filter="component-form-group">
                                <div class="layui-form-item">
                                    <div class="layui-inline">
                                        <label class="layui-form-label">选题方向</label>
                                        <div class="layui-input-inline">
                                            <label class="layui-form-label text-align-left">测试</label>
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">秘密等级</label>
                                        <div class="layui-input-inline">
                                            <label class="layui-form-label text-align-left">男</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label ">论文题目</label>
                                    <div class="layui-input-block">
                                        <label class="layui-form-label text-align-left">论文题目0000111</label>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label ">选题来源</label>
                                    <div class="layui-input-block  ">
                                        <label class="layui-form-label text-align-left">计算机科学</label>
                                    </div>
                                </div>
                            </form>
                            <div class="test-table-reload-btn" style="margin: 10px;">
                                <button class="layui-btn" data-type="reload">查看开题报告</button>
                            </div>
                            <table class="layui-hide" id="table_mid_examination" ></table>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-collapse" >
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title"  id="c_6">中期考核</h2>
                    <div class="layui-colla-content layui-card layui-show no-padding">
                        <div class="layui-col-md12">
                            <div class="test-table-reload-btn" style="margin: 10px;">
                                <button class="layui-btn" data-type="reload">查看开题报告</button>
                            </div>
                            <table class="layui-hide" id="table_open_paper" ></table>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-collapse" >
                <div class="layui-colla-item" id="c_7">
                    <h2 class="layui-colla-title"  >毕业论文</h2>
                    <div class="layui-colla-content layui-card layui-show no-padding">
                        <div class="layui-col-md12">
                            <fieldset class="layui-elem-field layui-field-title">
                                <legend>论文信息</legend>
                            </fieldset>
                            <form class="layui-form" action="" lay-filter="component-form-group">
                                <div class="layui-form-item">
                                    <label class="layui-form-label ">论文类型</label>
                                    <div class="layui-input-block  ">
                                        <label class="layui-form-label text-align-left">计算机科学</label>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label ">论文选题来源</label>
                                    <div class="layui-input-block  ">
                                        <label class="layui-form-label text-align-left">计算机科学</label>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label ">论文题目</label>
                                    <div class="layui-input-block  ">
                                        <label class="layui-form-label text-align-left">计算机科学</label>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label ">英文论文题目</label>
                                    <div class="layui-input-block  ">
                                        <label class="layui-form-label text-align-left">Compute</label>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label ">论文摘要</label>
                                    <div class="layui-input-block  ">
                                        <label class="layui-form-label text-align-left">计算机科学</label>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label ">上传论文</label>
                                    <div class="layui-input-block  ">
                                        <label class="layui-form-label text-align-left">
                                            <button class="layui-btn" data-type="reload">查看论文</button>
                                        </label>
                                    </div>
                                </div>
                            </form>

                            <fieldset class="layui-elem-field layui-field-title">
                                <legend>论文评阅</legend>
                            </fieldset>
                            <table class="layui-hide" id="table_paper_read" ></table>

                            <fieldset class="layui-elem-field layui-field-title">
                                <legend>论文答辩</legend>
                            </fieldset>
                            <table class="layui-hide" id="table_paper_defense" ></table>
                            <br/>
                            <fieldset class="layui-elem-field">
                                <legend>答辩决议</legend>
                                <div class="layui-field-box">
                                    计算机学科即计算机科学与技术，是研究计算机的设计与制造和利用计算机进行信息获取、表示、存储、处理、控制等的理论、原则、方法和技术的学科。方法论是对计算机领域认识和实践过程中的一般方法及其性质特点、内在联系和变化规律进行系统研究的理论总结。
                                    <br/>
                                    <div class="test-table-reload-btn" style="margin: 10px;">
                                        <button class="layui-btn" data-type="reload">查看开题报告</button>
                                    </div>
                                </div>
                            </fieldset>

                            <fieldset class="layui-elem-field layui-field-title">
                                <legend>实验数据抽查</legend>
                            </fieldset>
                            <table class="layui-hide" id="table_test_data" ></table>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        <div class="layui-form-item layui-layout-admin">
            <div class="layui-input-block">
                <div class="layui-footer" style="left: 0;">
                        <div class="layui-card">
                            <div class="layui-card-body section">
                                <button class="layui-btn" data-type="c_1">学位基本信息</button>
                                <button class="layui-btn" data-type="c_2">阶段性成果</button>
                                <button class="layui-btn" data-type="c_3">学习成绩</button>
                                <button class="layui-btn" data-type="c_4">获奖情况</button>
                                <button class="layui-btn" data-type="c_5">论文开题</button>
                                <button class="layui-btn" data-type="c_6">中期考核</button>
                                <button class="layui-btn" data-type="c_7">毕业论文</button>
                            </div>
                        </div>

                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>
<script src="../../../layuiadmin/layui/layui.js"></script>
<script>


    layui.config({
        base: '../../../layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['element', 'layer', 'index', 'table'], function () {
        var element = layui.element;
        var layer = layui.layer;
        var table = layui.table;
        var $ = layui.$;
        function Preview() {
        }

        Preview.prototype = {
            initTable: function () {
                //方法级渲染
                table.render({
                    elem: '#table_stage_result'
                    , url: layui.setter.base + 'json/table/user.js'
                    , cellMinWidth: 80
                    , cols: [[
                        {field: 'username', title: '成果类型'}
                        , {field: 'sex', title: '成果名称'}
                        , {field: 'city', title: '评奖单位/出版单位/学术刊物/会议名称'}
                        , {field: 'sign', title: '刊号'}
                        , {field: 'experience', title: '检索号/专利号'}
                        , {field: 'score', title: '收录'}
                        , {field: 'classify', title: '附件'}
                        , {field: 'classify', title: '备注'}
                    ]]
                    , page: true
                });

                table.render({
                    elem: '#table_score'
                    , url: layui.setter.base + 'json/table/user.js'
                    , cellMinWidth: 80
                    , cols: [[
                        {field: 'username', title: '课程代号'}
                        , {field: 'sex', title: '课程名称'}
                        , {field: 'city', title: '学时'}
                        , {field: 'sign', title: '学分'}
                        , {field: 'experience', title: '成绩等级'}
                        , {field: 'score', title: '开课学期'}
                        , {field: 'classify', title: '考试时间'}
                        , {field: 'classify', title: '附件'}
                        , {field: 'classify', title: '备注'}
                    ]]
                    , page: true
                });

                table.render({
                    elem: '#table_award'
                    , url: layui.setter.base + 'json/table/user.js'
                    , cellMinWidth: 80
                    , cols: [[
                        {field: 'username', title: '获奖名称'}
                        , {field: 'sex', title: '评奖单位'}
                        , {field: 'city', title: '年份'}
                        , {field: 'sign', title: '附件'}
                        , {field: 'classify', title: '备注'}
                    ]]
                    , page: true
                });

                table.render({
                    elem: '#table_open_paper'
                    , url: layui.setter.base + 'json/table/user.js'
                    , cellMinWidth: 80
                    , cols: [[
                        {field: 'username', title: '评议专家姓名'}
                        , {field: 'sex', title: '工作单位'}
                        , {field: 'city', title: '评议意见'}
                        , {field: 'sign', title: '附件'}
                        , {field: 'classify', title: '备注'}
                    ]]
                    , page: true
                });

                table.render({
                    elem: '#table_mid_examination'
                    , url: layui.setter.base + 'json/table/user.js'
                    , cellMinWidth: 80
                    , cols: [[
                        {field: 'username', title: '评议专家姓名'}
                        , {field: 'sex', title: '工作单位'}
                        , {field: 'city', title: '评议意见'}
                        , {field: 'sign', title: '附件'}
                        , {field: 'classify', title: '备注'}
                    ]]
                    , page: true
                });

                table.render({
                    elem: '#table_paper_read'
                    , url: layui.setter.base + 'json/table/user.js'
                    , cellMinWidth: 80
                    , cols: [[
                        {field: 'username', title: '类型'}
                        , {field: 'sex', title: '评阅人'}
                        , {field: 'city', title: '评阅人单位'}
                        , {field: 'sign', title: '研究方向'}
                        , {field: 'classify', title: '总分'}
                        , {field: 'classify', title: '评阅结论'}
                        , {field: 'classify', title: '答辩建议'}
                        , {field: 'classify', title: '职称'}
                        , {field: 'classify', title: '是否博导'}
                        , {field: 'classify', title: '附件'}
                        , {field: 'classify', title: '备注'}
                    ]]
                    , page: true
                });

                table.render({
                    elem: '#table_paper_defense'
                    , url: layui.setter.base + 'json/table/user.js'
                    , cellMinWidth: 80
                    , cols: [[
                        {field: 'username', title: '专家'}
                        , {field: 'sex', title: '学位'}
                        , {field: 'city', title: '职称'}
                        , {field: 'sign', title: '是否校外'}
                        , {field: 'classify', title: '评审结果'}
                        , {field: 'classify', title: '附件'}
                        , {field: 'classify', title: '备注'}
                    ]]
                    , page: true
                });

                table.render({
                    elem: '#table_test_data'
                    , url: layui.setter.base + 'json/table/user.js'
                    , cellMinWidth: 80
                    , cols: [[
                        {field: 'username', title: '抽查项目'}
                        , {field: 'sex', title: '抽查时间'}
                        , {field: 'city', title: '抽查结论'}
                        , {field: 'sign', title: '附件'}
                        , {field: 'classify', title: '备注'}
                    ]]
                    , page: true
                });
            },
            initSection: function () {
                $('.section>button').click(function(){
                    var id=$(this).attr('data-type');
                    $("html, body").animate({
                        scrollTop: ($('#'+id).offset().top-60) + "px"
                    }, {
                        duration: 500,
                        easing: "swing"
                    });
                });
            },
            init:function(){
                this.initTable();
                this.initSection();
            }
        }


        var preview=new Preview();
        preview.init();
    });

</script>